<template>
  <div>
    <SectionTitle title="申请调整内容" style="margin-bottom: 10px;" />
    <el-form
      ref="customerForm"
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32 customer-form"
      label-width="110px">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <template v-if="isLevelApply">
          <el-col :span="labelSpan">
            <el-form-item label="申请客户等级:">
              <span v-if="!detailData.levelColor">{{ detailData.customerLevel || '--' }}</span>
              <div v-else :style="{color: detailData.levelColor, background: changeColorAlphaVal(detailData.levelColor, 0.14)}" class="text-bg">{{ detailData.customerLevel || '--' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="labelSpan">
            <el-form-item label="欠款额度:">
              <span v-if="detailData.loanQuota">{{ detailData.loanQuota | bigNumberZH }}</span>
              <span v-else>--</span>
            </el-form-item>
          </el-col>
          <el-col :span="labelSpan">
            <el-form-item label="欠款账期:">
              <span>{{ detailData.loanPeriod || '--' }} 天</span>
            </el-form-item>
          </el-col>
        </template>
        <el-col v-if="isQuotaApply" :span="labelSpan">
          <el-form-item label="申请提升额度:">
            <span v-if="detailData.quotaApplication">{{ detailData.quotaApplication | bigNumberZH }}</span>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
        <el-col v-if="isPeriodApply" :span="labelSpan">
          <el-form-item label="申请提升账期:">
            <span>{{ detailData.payPeriodApplication || '--' }} 天</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import { mapState } from 'vuex';
import { LEVEL_CHANGE_TYPE } from '@/utils/const/customer';
import { bigNumberZH } from '@/filters/number';
import { changeColorAlphaVal } from '@/utils/tools';
export default {
  components: {
    SectionTitle
  },
  filters: { bigNumberZH },
  props: {
    detailData: {
      type: Object,
      default: () => ({})
    },
    rangeList: {
      type: Array,
      default: () => ([])
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    labelSpan() {
      return this.showMobilePage ? 24 : 8;
    },
    isLevelApply() {
      return this.rangeList.includes(LEVEL_CHANGE_TYPE.LEVEL);
    },
    isQuotaApply() {
      return this.rangeList.includes(LEVEL_CHANGE_TYPE.AMOUNT);
    },
    isPeriodApply() {
      return this.rangeList.includes(LEVEL_CHANGE_TYPE.PERIOD);
    }
  },
  methods: {
    changeColorAlphaVal
  }
};
</script>

<style lang="scss" scoped>
.customer-form {
  margin-bottom: 24px;
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-col-8 {
      &:not(:nth-child(3n)) {
        border-right: 1px solid transparent;
      }
    }
  }
  .text-bg {
    padding: 0 10px;
    border-radius: 999px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
}
</style>
